<template>
  <div class="ivu-box">
    <Breadcrumb>
      <BreadcrumbItem>机器管理</BreadcrumbItem>
      <BreadcrumbItem>机器列表</BreadcrumbItem>
    </Breadcrumb>

    <Form ref="formInline" :model="request" inline>
      <FormItem>
        <Input type="text" v-model="request.name" clearable placeholder="请输入机器名"/>
      </FormItem>

      <FormItem>
        <Button type="primary" @click="search" style="margin-right: 10px">搜索</Button>
        <Button type="primary" @click="toRealod" v-if="request.manager_id"
                style="margin-right: 10px">重置
        </Button>
        <Button type="primary" v-hasPermission="['25']" @click="addCall"
                style="margin-right: 10px">添加机器
        </Button>
        <!-- <Button type="primary" @click="$router.push('/user/add')" style="margin-right: 10px">添加机器</Button> -->
        <Button v-if="showDel" v-hasPermission="['26']" style="margin-right: 10px" @click="alldel">批量删除</Button>
      </FormItem>
    </Form>

    <!-- <div class="form_box"> -->
    <Table :columns="infoID===6?columns2:columns1" :height="height" :data="tableData" :loading="loading"
           @on-selection-change="selectChange">
      <template slot-scope="{ row }" slot="status">
        <span class="success" v-if="row.status==='1'">启用中</span>
        <span class="error" v-if="row.status==='2'">已被禁用</span>

      </template>
      <template slot-scope="{ row }" slot="option">
        <Button type="primary" v-hasPermission="['27']" size="small" style="margin-right: 5px"
                @click="edit(row)">编辑
        </Button>
        <Button type="error" v-hasPermission="['26']" size="small" style="margin-right: 5px"
                @click="remove(row)">删除
        </Button>
        <Button class="button" size="small" v-hasPermission="['26']" :type="row.status === 2?'success':'error' "
                @click="setStatus(row)">
          <span v-if="row.status === 1">禁用</span>
          <span v-else>启用</span>
        </Button>
        <Button type="success" v-hasPermission="['26']" size="small" @click="add4" style="margin-left: 5px"
        >查看商品
        </Button>
      </template>
    </Table>

    <!-- </div> -->

    <div style="display: flex;justify-content: center;margin-top: 24px;">
      <Page :total="page.count" :page-size="20" :page-size-opts="[20,30,40,50,100]" show-elevator show-sizer
            show-total @on-change="handleCurrentChange" @on-page-size-change="handleSizeChange"/>
    </div>

    <Modal v-model="modal1"
           :title="form.id ? '编辑机器' : '添加机器'"
           :loading="modalLoading"
           :mask-closable="false"
           @on-ok="confirm"
           @on-cancel="cancel">
      <Form :model="form"
            :label-width="110">
        <FormItem label="机器名"
                  v-if="infoID!==6">
          <Input v-model="form.name"
                 placeholder="请输入机器名"/>
        </FormItem>
        <FormItem label="经理" v-if="infoID!==6">
          <Select placeholder="请选择" style="width: 120px;" v-model="form.manager_id">
            <Option :value="item.id" v-for="(item,index) in accountList" :key="index">{{ item.username }}
            </Option>
          </Select>
        </FormItem>
        <FormItem label="描述">
          <Input v-model="form.description" placeholder="请输入描述"></Input>
        </FormItem>
        <FormItem label="地址" style="margin-bottom: 60px;">
          <ysMap v-if="showMap" :changeCall="changeAddressCall" :locationInfo="locationInfo"></ysMap>
        </FormItem>
      </Form>
    </Modal>
    <Modal v-model="modal4" :mask-closable="false" width="1000">
      <Form :label-width="110">
        <div><h4 class="door_device">查看商品详情</h4></div>
        <Form ref="formInline" :model="request" inline>
          <div style="display: flex;">
            <FormItem>
              商品名称: <Input
              type="text"
              clearable
              placeholder="请输入商品名称"
              style="width: 120px"
            />
            </FormItem>
            <FormItem>
              条形码: <Input type="text" v-model="request.username" style="width: 120px" clearable/>
            </FormItem>
            <FormItem>
              <Button type="success" @click="add5" style="margin-right: 10px">新增</Button>
            </FormItem>
          </div>
          <div><p>动态商品:</p></div>
          <Table border :columns="columns3" :data="data3"></Table>
        </Form>
        <!--          <Tabs value="name1">-->
        <!--            <TabPane label="未绑定设备" name="name1">-->
        <!--              <Form ref="formInline" :model="request" inline>-->
        <!--                <FormItem>-->
        <!--                  <Input type="text"  clearable placeholder="请输入设备编号" />-->
        <!--                </FormItem>-->
        <!--                <FormItem>-->
        <!--                  <Input type="text"  clearable placeholder="请输入设备名称" />-->
        <!--                </FormItem>-->
        <!--                <FormItem>-->
        <!--                  <Button type="primary" @click="search" style="margin-right: 10px">搜索</Button>-->
        <!--                </FormItem>-->
        <!--                <Table border :columns="columns3" :data="data3"></Table>-->
        <!--              </Form>-->
        <!--            </TabPane>-->
        <!--            <TabPane label="已绑定设备" name="name2">-->
        <!--              <Form ref="formInline" :model="request" inline>-->
        <!--                <FormItem>-->
        <!--                  <Input type="text"  clearable placeholder="请输入设备编号" />-->
        <!--                </FormItem>-->
        <!--                <FormItem>-->
        <!--                  <Input type="text"  clearable placeholder="请输入设备名称" />-->
        <!--                </FormItem>-->
        <!--                <FormItem>-->
        <!--                  <Button type="primary" @click="search" style="margin-right: 10px">搜索</Button>-->
        <!--                </FormItem>-->
        <!--                <Table border :columns="columns3" :data="data3"></Table>-->
        <!--              </Form>-->

        <!--            </TabPane>-->
        <!--          </Tabs>-->
      </Form>
    </Modal>
    <Modal v-model="modal5" :mask-closable="false">
      <Form :label-width="110">
        <div class="door_device"><h4>商品列表:</h4></div>
        <div style="border-bottom: 1px solid #e9e9e9;padding-bottom:6px;margin-bottom:6px;">
          <Checkbox
            :indeterminate="indeterminate"
            :value="checkAll"
            @click.prevent.native="handleCheckAll">全选
          </Checkbox>
        </div>
        <CheckboxGroup v-model="checkAllGroup" @on-change="checkAllGroupChange">
          <Checkbox label="商品1"></Checkbox>
          <br><br>
          <Checkbox label="商品2"></Checkbox>
          <br><br>
          <Checkbox label="商品3"></Checkbox>
          <br><br>
          <Checkbox label="商品4"></Checkbox>
          <br><br>
          <Checkbox label="商品5"></Checkbox>
          <br><br>
          <Checkbox label="商品6"></Checkbox>
          <br><br>
          <Checkbox label="商品7"></Checkbox>
          <br><br>
          <Checkbox label="商品8"></Checkbox>
        </CheckboxGroup>
      </Form>
    </Modal>
  </div>
</template>

<script>
import ysMap from '@/components/map'
import '../../style/main.css'

export default {
  components: {
    ysMap
  },
  data() {
    return {
      // 多选框：
      indeterminate: true,
      checkAll: false,
      // 设置初始状态选中哪些多选框
      checkAllGroup: [],
      columns3: [
        {
          title: '编号',
          key: 'name',
          minWidth: 100
        },
        {
          title: '商品名称',
          key: 'age',
          minWidth: 200
        },
        {
          title: '条形码',
          key: 'address',
          minWidth: 200
        },
        {
          title: '规格',
          key: 'ge',
          minWidth: 100
        },
        {
          title: '正面图',
          key: 'con',
          minWidth: 100

        },
        {
          title: '背面图',
          key: 'con2',
          minWidth: 100
        },
        {
          title: '侧面图',
          key: 'con3',
          minWidth: 100

        },
        {
          title: '状态',
          key: 'status1',
          minWidth: 100
        },
        {
          title: '创建时间',
          key: 'create',
          minWidth: 200

        },
        {
          title: '操作',
          key: 'work',
          minWidth: 200
        }
      ],
      data3: [
        {
          name: '001',
          age: '康师傅冰紅茶柠檬味瓶装500ml',
          address: '56163600',
          ge: '大',
          status1: '已上架'


        },
        {
          name: '002',
          age: '康师傅冰紅茶柠檬味瓶装500ml',
          address: '56163601',
          ge: '大',
          status1: '已上架'

        },
        {
          name: '003',
          age: '康师傅冰紅茶柠檬味瓶装500ml',
          address: '56163602',
          ge: '大',
          status1: '已上架'

        },
        {
          name: '004',
          age: '康师傅冰紅茶柠檬味瓶装500ml',
          address: '56163603',
          ge: '大',
          status1: '已上架'
        }
      ],
      width: this.$store.state.width,
      height: this.$store.state.height,
      showDel: false, //批量删除
      type: 1, //1admin 2manager 3operator
      loading: false,
      request: {
        name: '',
        page: 1,
        loading: false
      },
      codeImg: '',
      columns1: [{
        width: 60,
        align: "center",
        type: 'selection'
      },
        {
          title: "机器名",
          key: "name",
          minWidth: 150,
          align: "center"
        },
        {
          title: "机器组经理",
          key: "username",
          minWidth: 150,
          align: "center"
        },
        {
          title: "所属机器组",
          key: "device_group",
          minWidth: 150,
          align: "center"
        },
        {
          title: "状态",
          slot: "status",
          minWidth: 150,
          align: "center"
        },
        {
          title: "地址",
          key: "address",
          minWidth: 250,
          align: "center"
        },

        {
          title: "经度",
          key: "long",
          minWidth: 200,
          align: "center"
        }, {
          title: "纬度",
          key: "lat",
          minWidth: 200,
          align: "center"
        },
        {
          title: "描述",
          key: "description",
          minWidth: 200,
          align: "center"
        },


        {
          title: "创建时间",
          key: "create_time",
          minWidth: 150,
          align: "center"
        },

        {
          title: "操作",
          slot: "option",
          minWidth: 300,
          align: "center",
          fixed: 'right'
        }
      ],
      columns2: [{
        width: 60,
        align: "center",
        type: 'selection'
      },
        {
          title: "机器名",
          key: "name",
          minWidth: 150,
          align: "center"
        },
        {
          title: "所属机器组",
          key: "device_group",
          minWidth: 150,
          align: "center"
        },
        {
          title: "状态",
          slot: "status",
          minWidth: 150,
          align: "center"
        },
        {
          title: "地址",
          key: "address",
          minWidth: 250,
          align: "center"
        },

        {
          title: "经度",
          key: "long",
          minWidth: 200,
          align: "center"
        }, {
          title: "纬度",
          key: "lat",
          minWidth: 200,
          align: "center"
        },
        {
          title: "描述",
          key: "description",
          minWidth: 200,
          align: "center"
        },
        {
          title: "创建时间",
          key: "create_time",
          minWidth: 150,
          align: "center"
        },

        {
          title: "操作",
          slot: "option",
          minWidth: 200,
          align: "center",
          fixed: 'right',
        }
      ],
      tableData: [],
      page: {},
      modalLoading: true,
      modal1: false,
      modal4: false,
      modal5: false,
      form: {
        id: null,
        name: '',
        manager_id: '0',
        long: "0.0",
        lat: "0.0",
        address: "",
        description: ''
      },
      accountList: [],
      selectID: [],
      // 默认初始化显示的坐标
      locationInfo: {
        // iocn: "",
        // name: "",
        // longitude: "", // 经度
        // latitude: "", // 纬度
        // address: "" ,// 地址

        iocn: "",
        name: "北京",
        longitude: "116.397228", // 经度
        latitude: "39.909604", // 纬度
        address: "北京" // 地址
      },
      showMap: false
    };
  },
  created() {
    this.infoID = JSON.parse(this.astgo.getItem("ys_prj_info")).role_id;

    if (this.$route.query.manager_id) {
      this.request.manager_id = this.$route.query.manager_id
    }
    // this.lists();
    // this.getAccount();

  },
  methods: {
    handleCheckAll() {
      if (this.indeterminate) {
        this.checkAll = false;
      } else {
        this.checkAll = !this.checkAll;
      }
      this.indeterminate = false;

      if (this.checkAll) {
        this.checkAllGroup = ['商品1', '商品2', '商品3', '商品4', '商品5', '商品6', '商品7', '商品8'];
      } else {
        this.checkAllGroup = [];
      }
    },
    checkAllGroupChange(data) {
      if (data.length === 3) {
        this.indeterminate = false;
        this.checkAll = true;
      } else if (data.length > 0) {
        this.indeterminate = true;
        this.checkAll = false;
      } else {
        this.indeterminate = false;
        this.checkAll = false;
      }
    },
    add4() {
      this.cancel();
      this.modal4 = true
      this.allocated = [];
      this.undistributed = [];
      if (this.infoID === 6) {
        console.log('6')
        this.axios.post("device/getAllDev").then(res => {
          if (res.code === 1) {
            this.allocated = res.data.allocated;
            this.undistributed = res.data.undistributed;
          }
        });

      }
    },
    add5() {
      this.cancel();
      this.modal5 = true
      this.allocated = [];
      this.undistributed = [];
      if (this.infoID === 6) {
        console.log('6')
        this.axios.post("device/getAllDev").then(res => {
          if (res.code === 1) {
            this.allocated = res.data.allocated;
            this.undistributed = res.data.undistributed;
          }
        });

      }
    },
    addCall() {
      this.locationInfo.name = "北京"
      this.locationInfo.longitude = "116.397228" // 经度
      this.locationInfo.latitude = "39.909604"// 纬度
      this.locationInfo.address = "北京" // 地址
      this.showMap = false;
      this.$nextTick(function () {
        this.showMap = true;
      })
      this.modal1 = true;
      this.modal2 = true;
    },
    // 获取经纬度，地址信息回调方法
    changeAddressCall(address, lng, lat) {

      console.log(address, lng, lat)

      this.form.address = address;
      this.form.long = lng;
      this.form.lat = lat;

      this.locationInfo.name = address
      this.locationInfo.longitude = lng
      this.locationInfo.latitude = lat
      this.locationInfo.address = address

    },

    alldel() {
      //批量删除
      this.$Modal.confirm({
        title: "确定要删除这些机器吗？",
        onOk: () => {
          // this.$Message.success("删除成功");
          // this.$Message.success('批量删除id:' + JSON.stringify(this.selectID));
          this.axios.post("device/deviceDel", {
            id: this.selectID
          }).then(res => {
            if (res.code === 1) {
              this.$Message.success("删除成功");
              this.lists();
            }
          })

        },
        onCancel: () => {
        }
      });


    },
    selectChange(selection) {
      console.log('选项发生改变', selection)
      this.selectID = [];
      selection.forEach(item => {
        this.selectID.push(item.id)
      })

      if (this.selectID.length > 0) {
        this.showDel = true
      } else {
        this.showDel = false
      }
      console.log(this.selectID)
    },

    viewSub(row) {
      console.log(row.id)
      this.$Message.success("id:", row.id);
      // this.$router.push('/master/index?account_id=' + row.id);
    },
    search() {
      this.request.page = 1;
      this.lists();
    },
    toRealod() {
      this.request = {
        name: '',
        page: 1,
        loading: false
      }
      this.search();
    },
    handleSizeChange(val) {
      this.request.page = 1;
      this.request.limit = val;
      this.lists();
    },
    handleCurrentChange(val) {
      this.request.page = val;
      this.lists();
    },
    lists() {
      this.loading = true;
      this.axios.post("device/deviceList", this.request).then(res => {
        if (res.code === 1) {
          this.loading = false;
          this.tableData = res.data.list;
          this.page.count = res.data.count; // 总条数
          this.page.curPage = res.data.curPage; // 当前页
          this.page.countPage = res.data.countPage; // 总页数
        }
      });


    },
    edit(row) {
      this.form.id = row.id;
      this.form.name = row.name;
      this.form.manager_id = row.manager_id;
      this.form.description = row.description

      this.form.long = row.long
      this.form.lat = row.lat
      this.form.address = row.address

      this.locationInfo.name = row.address || "北京"
      this.locationInfo.longitude = (row.long && row.long != '0.0') ? row.long : "116.397228" // 经度
      this.locationInfo.latitude = (row.lat && row.lat != '0.0') ? row.lat : "39.909604"// 纬度
      this.locationInfo.address = row.address || "北京" // 地址

      this.showMap = false;
      this.$nextTick(function () {
        this.showMap = true;
      })

      this.modal1 = true;
    },
    confirm() {
      var url = this.form.id ? 'device/deviceEdit' : 'device/addDevice';

      console.log(this.form)

      // return
      this.axios.post(url, this.form).then(res => {
        if (res.code === 1) {
          this.modal1 = false
          this.$Message.success("操作成功");
          this.cancel()
          this.lists();
        } else {
          this.modalLoading = false;
        }
      });
    },
    remove(row) {
      this.$Modal.confirm({
        title: "确定要删除机器:“" + row.name + "”吗？",
        onOk: () => {

          this.axios.post("device/deviceDel", {
            id: [row.id]
          }).then(res => {
            if (res.code === 1) {
              this.$Message.success("删除成功");
              this.lists();
            }
          })
        },
        onCancel: () => {
        }
      });
    },
    setStatus(row) {
      var text = "确定要" + (row.status === 2 ? "启用" : "禁用") + "此机器吗？";
      this.$Modal.confirm({
        title: text,
        onOk: () => {
          this.axios.post("device/deviceStatus", {
            id: row.id
          }).then(res => {
            if (res.code === 1) {
              this.$Message.success("操作成功");
              this.lists();
            }
          })
        },
        onCancel: () => {
        }
      });
    },

    cancel() {
      this.form = {
        id: null,
        name: '',
        manager_id: '0',
        long: "0.0",
        lat: "0.0",
        address: "",
        description: ''
      };
    },
    getAccount() { //获取所有经理
      this.axios.post("device/getAccount").then(res => {
        if (res.code === 1) {
          this.accountList = res.data;
        }
      });
    },
  }
};
</script>

<style scoped>
#amap {
  position: relative;
}

.spec_item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.spec_item .input {
  width: 200px;
}

.spec_item button {
  margin-left: 10px;
}

.door_device {
  position: relative;
  top: -20px;
}
</style>
